<template>
  <div class="SK-community-container">
    <div class="SK-community-content SK-community-posts-detail-container">
      <div class="mian-content">
        <div class="SK-community-middle">
          <div class="SK-community-post-content">
            <div class="post-header">
              <h1>【{{ newsDetail.gamename }}】相关资讯</h1>
            </div>
            <div class="post-detail">
              <p class="">发表于{{ newsDetail.time }}</p>
            </div>
            <div class="post-content">
              <div class="dangerously_html_container">
                {{ newsDetail.new_content }}
              </div>
            </div>
            <div class="post-content">
              <div class="dangerously_html_container">
                <img :src="newsDetail.url" />
              </div>
            </div>
            <div class="post-thumb-up">
              <div class="thumb_up_con">
                <button class="dianzan_con" @click="update">
                  <i
                    class="iconfont icon-icon"
                    v-show="newsDetail.likestate == 1"
                  ></i>
                  <i
                    class="iconfont icon-dianzan"
                    v-show="newsDetail.likestate == 2"
                  ></i>
                </button>
                <p>{{ newsDetail.likecount }}人已点赞</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "NewsDetail",
  mounted() {
    this.getNewsDetail();
  },
  methods: {
    async getNewsDetail() {
      try {
        let id = this.$route.query.id;
        let username = this.$route.query.username;
        await this.$store.dispatch("getNewDetail", {
          newsId: id,
          username: username,
        });
      } catch (error) {
        alert(error.message);
      }
    },
    async update() {
      try {
        let id = this.$route.query.id;
        let username = this.$route.query.username;
        await this.$store.dispatch("getlikeNews", {
          newsId: id,
          username: username,
        });
        this.getNewsDetail();
      } catch (error) {
        alert(error.message);
      }
    },
  },
  computed: {
    ...mapState({
      newsDetail: (state) => state.community.newsDetail,
    }),
  },
};
</script>

<style>
@import "../../assets/css/newsdetail.css";
</style>
